<template>
  <div class="btd-root">
    <el-button size="mini" icon="el-icon-plus" @click="addDataBtn">添加</el-button>
    <item-table :id="tableId" :table-column="_tableColumn" :table-data="tableData">
      <template v-slot:operation="{row}">
        <el-button type="text" @click="picView(row)">查看照片</el-button>
      </template>
    </item-table>
    <el-pagination
      small
      layout="prev, pager, next"
      :total="pageInfo.total"
      :current-page="pageInfo.pageNum"
      :page-size="pageInfo.pageSize"
      @current-change="pageChange"
    >
    </el-pagination>
    <lark-card border :x="300" :y="100" body-height="600px" :body-width="'500px'" v-if="editDataVisible" :hidden="!editDataVisible"
               @closeAction="editDataVisible = !editDataVisible"
               card-title="添加信息" draggable
               :radius="false">

      <div class="edit-btd">
        <div class="edit-btd-form">
          <el-scrollbar>
            <div class="edit-btd-container">
              <el-form :ref="formRef" :model="formFiled" label-width="100px" :rules="rules">
                <slot name="form-item"></slot>
              </el-form>
            </div>
          </el-scrollbar>
        </div>
        <div class="edit-btd-footer">
          <el-button :loading="submitBtnLoading" @click="submit" round>确定</el-button>
        </div>
      </div>
    </lark-card>
  </div>
</template>

<script>
  import { reactive, toRefs, onMounted, ref, watch, computed } from '@vue/composition-api'
  import itemTable from '../components/itemTable'
  import loading from '@/utils/loading'
  import { Message } from 'element-ui'
  import { larkViewer } from 'lark-common'
  import { MathUtil } from 'lark-utils'
  import { getPicUrl } from '@/api/industry/file'

  export default {
    name: 'btd',
    props: {
      rules: {
        type: Object,
        default: () => {
          return {}
        }
      },
      mid: {
        type: [String, Number],
        default: null
      },
      formFiled: {
        type: Object,
        default: () => {
          return {}
        }
      },
      submitBeforeAction: {
        type: Function,
        default: () => {
          return null
        }
      },
      loadListBefore: {
        type: Function,
        default: () => {
          return null
        }
      },
      queryListAction: {
        type: Function,
        default: () => {
          return null
        }
      },
      submitDataAction: {
        type: Function,
        default: () => {
          return null
        }
      },
      tableColumn: {
        type: Array,
        default: () => {
          return [{ name: '次数', prop: 'num', width: 50 }, { name: '时间', prop: 'date' }, { name: '时期', prop: 'period' }, {
            name: '操作',
            prop: 'operation',
            type: 'slot',
            width: 100
          }]
        }
      }
    },
    components: {
      itemTable
    },
    setup(props, content) {
      let { mid, queryListAction, submitDataAction, tableColumn: _tableColumn, formFiled } = props
      let data = reactive({
        getPicUrl: getPicUrl + '/',
        tableId: `table${MathUtil.guid()}`,
        formRef: `formRef${MathUtil.guid()}`,
        _tableColumn,
        tableData: [{ num: 1, date: '2020-03.25', period: '示例时期' }, { num: 2, date: '2020-03.25', period: '示例时期' }, {
          num: 3,
          date: '2020-03.25',
          period: '示例时期'
        }, { num: 1, date: '2020-03.25', period: '示例时期' }, { num: 2, date: '2020-03.25', period: '示例时期' }],
        pageInfo: {
          total: 0,
          pageNum: 1,
          pageSize: 5
        },
        editDataVisible: false,
        submitBtnLoading: false,
        editFormInit: {}

      })

      const resetEditForm = () => {
        Object.keys(formFiled).forEach(key => {
          formFiled[key] = data.editFormInit[key]
        })
      }

      const pageChange = async(currentPage) => {
        data.pageInfo.pageNum = currentPage
        await loadListData()
      }
      const loadListData = async() => {
        let load = loading(document.getElementById(`${data.tableId}`))
        try {
          let response = await queryListAction({ ...data.pageInfo })
          if (props.loadListBefore != null) {
            response = await props.loadListBefore(response)
          }
          data.tableData = response.rows
          data.pageInfo.total = response.total
        } finally {
          load.close()
        }
      }
      const addDataBtn = () => {
        resetEditForm()
        data.editDataVisible = true
      }
      const submit = () => {
        try {
          content.refs[`${data.formRef}`].validate(async valid => {
            if (valid) {

              let requestData = props.formFiled
              if (props.submitBeforeAction != null) {
                requestData = JSON.parse(JSON.stringify(props.submitBeforeAction(props.formFiled)))
              }

              data.submitBtnLoading = true
              await submitDataAction({ filId: props.mid, ...requestData })
              Message.success('操作成功')
              loadListData()
              data.editDataVisible = false

            }
          })
        } finally {
          data.submitBtnLoading = false
        }
      }
      const picView = (row) => {
        let pics = row.photos.map(pic => {
          return { src: data.getPicUrl + pic.fileName }
        })
        larkViewer(pics)
      }

      const bigPic = (picData) => {

      }

      onMounted(() => {
        data.editFormInit = JSON.parse(JSON.stringify(formFiled))
        loadListData()
      })
      return { ...toRefs(data), pageChange, addDataBtn, submit, picView }
    }
  }
</script>

<style scoped lang="scss">
  .btd-root {

  }
</style>

<style lang="scss">
  .edit-btd {
    padding: 10px 5px;

    .edit-btd-form {
      .edit-btd-container {
        padding: 0px 10px;
      }

      height: calc(598px - 20px - 40px);
      padding-bottom: 10px;
    }

    .edit-btd-footer {
      height: 40px;
      text-align: right;
      margin-right: 10px;
      margin-top: 10px;
    }
  }
</style>
